import { useState, useContext, useEffect } from 'react';
import { Input, Button, Space, Toast } from "antd-mobile";
import { AudioOutlined, CloseOutlined, VideoCameraOutlined } from "@ant-design/icons";
import { useHistory } from 'react-router-dom';

import SelectGroupContactor from '../../../components/SelectGroupContactor';
import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);

  const [meetingName, setMeetingName] = useState(`${mySdkStore.mockConfig.userId}发起的视频会议`);
  const [selectGroupContactorProps, setSelectGroupContactorProps] = useState({ visible: false });

  const handleCreateMeeting = (userIds) => {
    mySdkStore.sdk.createConversation({ type: 'meeting', name: meetingName, owner: mySdkStore.mockConfig.userId, members: userIds, subUserId: userIds }).then((data) => {
      mySdkStore.setCurrentMeetingInfo({userIds, cid: data.cid});
      history.push({ pathname: `/meetingDetail/${data.cid}` });
    }, () => {
      Toast.show({
        icon: 'fail',
        content: '创建会议失败'
      })
    });
  }

  const handleSelector = () => {
    setSelectGroupContactorProps({
      visible: true,
      title: '选择参会人',
      cid: '',
      getListApi: 'queryUsers',
      onOk: (userIds) => {
        handleCreateMeeting(userIds);
      },
      onClose: () => setSelectGroupContactorProps({ visible: false})
    });
  }

  useEffect(() => {
    mySdkStore.setCurrentMeetingInfo(null);
    return () => { }
  }, [])

  return <div className="createMeetingPage">
    <div className="closeIcon" onClick={() => history.goBack()}>
      <CloseOutlined style={{ fontSize: 22 }} />
    </div>
    <div className="meetingNameArea">
      <div>会议主题</div>
      <Input defaultValue={meetingName} value={meetingName} onChange={val => setMeetingName(val)}  className="meetingNameInput" />
    </div>
    <div className="bottomArea">
      <Space className="iconBar" style={{ '--gap': '40px' }}>
        <div className="iconWrap"><AudioOutlined style={{ fontSize: 28 }} /></div>
        <div className="iconWrap"><VideoCameraOutlined style={{ fontSize: 28 }} /></div>
      </Space>
      <div className="addButton">
        <Button block color="primary" onClick={handleSelector}>添加参会人</Button>
      </div>
      <div className="createFirstButton" onClick={handleCreateMeeting}>
        先进入会议 {">"}
      </div>
    </div>
    { selectGroupContactorProps.visible && <SelectGroupContactor {...selectGroupContactorProps} /> }
  </div>
}